<template>
	<view class="contain" :style="{ paddingTop: setmargintop() + 'px' }">
		<view class="new-top-nav">
			<uni-nav-bar title="文章详情" backgroundColor="#fff" color="#000" statusBar="true"
				@clickLeft="back()" left-icon="arrowleft"></uni-nav-bar>
		</view>
		<view class="contain-view" :style="{height:setcollapseheight() + 'px'}">
			<view class="title">
				{{ article.title }}
			</view>
			<view class="poster">
				<view class="post">发布日期：{{ article.createTime }}</view>
			</view>
			
			<view class="content">
				<view v-html="article.content"></view>
			</view>
			
			<!-- <view class="poster">
				<view class="post">发帖人：{{ article.createUserName }}</view>
				<view class="post">发布日期：{{ article.createTime }}</view>
			</view> -->
			
			<view class="co">
				浏览量：{{ article.watchNum }}
			</view>
		</view>
			
		<!-- <view class="sign">
			<image @click="signFn(article.articleId)" v-if="!hasSigned" class="img" src="@/static/socialized-service/breed/sign.png" mode="aspectFit"></image>
			<image @click="signFn(article.articleId)" v-if="hasSigned" class="img" src="@/static/socialized-service/breed/signed.png" mode="aspectFit"></image>
			<view class="sign-co">{{ article.thumpupNum }}</view>
		</view> -->
	</view>
</template>

<script>
	import techArticleApi from '@/api/socialized-servce/breed-aquatics/tech-article/index.js'
	export default {
		data() {
			return {
				article: {},
				hasSigned: false,
				signing: false,
			}
		},
		onPullDownRefresh() {
			this.param = { page: 1, size: 5, total: 0 }
			this.loadDataList()
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		onLoad(e) {
			this.id = e.id
		},
		onShow() {
			this.loadArticle()
		},
		methods: {
			loadArticle() {
				techArticleApi.queryByIdArticle({
					id: this.id
				}).then(res => {
					this.article = res.data
					this.hasSigned = res.data.userThumpUp == 1
				})
			},
			// 点赞
			signFn(id) {
				if (this.signing) return
				this.signing = true
				if (!this.hasSigned) {
					techArticleApi.thumpUp(id).then(res => {
						this.hasSigned = true
						uni.showToast({
							title: '点赞成功',
							icon: 'none'
						})
						// this.loadArticle()
						this.article.thumpupNum++
						this.signing = false
					})
				} else {
					techArticleApi.thumpUpCancel(id).then(res => {
						this.hasSigned = false
						uni.showToast({
							title: '取消点赞成功',
							icon: 'none'
						})
						this.article.thumpupNum--
						this.signing = false
					})
				}
			},
			// 设置顶部高度
			setmargintop() {
				let top = 0
				top = this.customBar + 10
				return top
			},
			//  设置内容高度
			setcollapseheight() {
				let topheightone = uni.upx2px(160)
				let winHeight = 0
				uni.getSystemInfo({
				  success: function(res) {
					winHeight = res.windowHeight
				  }
				});
				winHeight = parseInt(winHeight) - topheightone
				// #ifndef H5
				winHeight = winHeight - 10
				// #endif
				return winHeight
			},
			//返回上一步
			back() {
				// let pages = getCurrentPages();  //获取所有页面栈实例列表
				// let nowPage = pages[ pages.length - 1];  //当前页页面实例
				// let prevPage = pages[ pages.length - 2 ];  //上一页页面实例
				// if (prevPage.$vm.articleList && prevPage.$vm.articleList[this.index]) {
				// 	prevPage.$vm.articleList[this.index].watchNum = this.article.watchNum
				// }
				uni.navigateBack({ delta: 1 })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.contain {
		width: 100%;
		font-size: 14px;
		line-height: 24px;

		.new-top-nav {
			width: 100%;
			position: fixed;
			top: 0;
			z-index: 99;
		}
		
		.contain-view {
			margin: 0 30rpx;
			padding: 20rpx 30rpx;
			position: relative;
			background-color: #fff;
			border-radius: 16rpx;
			box-sizing: border-box;
			
			.title {
				font-size: 20px;
				font-weight: bold;
				margin-bottom: 10rpx;
				color: #88744e;
			}
			
			.poster {
				display: flex;
				color: #707273;
				margin-top: 20rpx;
				padding-top: 10rpx;
				// border-top: 1px solid #d3e6f9;
				.post {
					flex: 2;
					width: 40%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					&:last-child {
						flex: 3;
						width: 60%;
					}
				}
			}
			.co {
				color: #707273;
				margin-top: 10rpx;
			}
			.content {
				margin-top: 20rpx;
				height: calc(100% - 110px);
				overflow: auto;
				text-indent: 48rpx;
				
				::v-deep img {
					display: block;
					max-width: 100%;
				}
				::v-deep .ql-video {
					display: block;
					max-width: 100%;
				}
			}
		}
		
		.sign {
			height: 100rpx;
			margin-top: 50rpx;
			text-align: center;
			.img {
				width: 100rpx;
				height: 100%;
			}
		}
	}
	
</style>
